<script>
import { vAreaSelect } from 'istrong-mvue-common-ui';
import { clone, isEmpty, isString } from 'lodash';
import { get } from 'istrong-axiosmodel';
import { Promise } from 'es6-promise';

export default {
  name: 'areaPicker',
  components: {
    'istrong-AreaSelect': vAreaSelect
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    staticData: {
      type: Array,
      default: () => {
        return [
        ];
      }
    },
    defaultSelected: {
      type: Array,
      default: () => { return [{ id: '350000', name: '福建省' }]; }
    }
  },
  data () {
    return {
      staticAreas: clone(this.staticData),
      selectedArea: [],
      transitionName: ''
    }
  },
  watch: {
    value (val) {
      this.transitionName = val ? 'areaPicker-show-slide' : 'areaPicker-hide-slide';
    }
  },
  methods: {
    onClose () {
      this.$emit('input', false);
    },
    onSelectedAreas (result) {
      this.onClose();
      this.staticAreas = result.staticData;

      if (result.status) {
        this.selectedArea = result.result;
        this.$emit('change', this.selectedArea);
      }
    },
    getChildArea (parentArea) {
      let parentId = isString(parentArea) ? parentArea : parentArea.id;
      return new Promise((resolve, reject) => {
        get('base.areas', {
          baseAreas: {
            parent_code: parentId
          }
        }).then(result => {
          let data = [];
          (result || []).forEach(item => {
            data.push({
              id: item.code,
              name: item.name,
              parent_id: parentId
            })
          });

          resolve({ data: data })
        });
      });
    }
  },
  created () {
    if (!isEmpty(this.defaultSelected)) {
      this.selectedArea = this.defaultSelected;
    }
  }
}
</script>

<template>
  <transition v-bind:name="transitionName">
    <div
      class="areaPicker transition-Slide"
      v-show="value"
    >
      <div
        class="areaPicker-Cover"
        @click="onClose"
      ></div>
      <div class="areaPicker-Main">
        <istrong-AreaSelect
          :levelCount="3"
          :defaultSelected="selectedArea[selectedArea.length-1].id"
          :staticData="staticAreas"
          :dynamicRequest="getChildArea"
          @callback="onSelectedAreas"
          v-if="value"
        ></istrong-AreaSelect>
      </div>
    </div>
  </transition>
</template>
<style>
.areaPicker {
  position: absolute;
  z-index: 40;
  width: 100%;
  height: 100%;
}
.areaPicker > div {
  float: left;
}
.areaPicker-Cover {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
.areaPicker-Main {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 70%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #fff;
}
.istrong-AreaSelect {
  position: absolute;
}
.areaPicker-hide-slide-enter,
.areaPicker-hide-slide-leave-active,
.areaPicker-show-slide-leave-active,
.areaPicker-show-slide-enter {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
</style>